<style>
  .coupons-record-box {
    position: relative;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #D9D9D9;
    overflow: hidden;
  }
  .coupons-record-title{
    font-weight: bold;
    color: #000018;
  }
  .coupons-record-more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.95));
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }
  .coupons-record-more-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
  }
  .coupons-record-wrap {
    margin-top: 20px;
    display: grid;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
  }
  .coupons-record-item {
    display: flex;
    cursor: pointer;
  }
  .coupons-record-item-riado {
    width: 18px;
    height: 18px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .coupons-record-item-body {
    flex: 1;
  }
  .coupons-record-item-header{
    display: flex;
    align-items: center;
  }
  .coupons-record-item-code {
    display: inline-block;
    font-weight: 400;
    color: #1e1d29;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    font-size: 14px;
    line-height: 18px;
    padding: 5px 10px;
    margin-left:10px;    
    border: 1px dashed #d9d9d9;
    text-align: center;
    position: relative;
  }
  .coupons-record-item-label {
    font-weight: 400;
    color: #999999;
    font-size: 12px;
    margin-top: 10px;
    margin-left: 26px;
  }
  .coupons-record-item-active .coupons-record-item-riado {
    border: 6px solid var(--coupons-color);
  }
  .coupons-record-item-active .coupons-record-item-code {
    border: 1px dashed var(--coupons-color);
    color: var(--coupons-color);
  }
  .coupons-exclusive-label {
    position: absolute;
    right: calc(100% - 120px);
    top: 0;
    border-radius: 6px 1px 6px 1px;
    background-color: #333333;
    color: #ffffff;
    padding: 2px 8px;
    transform: translate(0%, -70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    white-space: nowrap;
  }
</style>
<style>
{%- if template_route == "order/checkout" or template_route == "orderonepage/index" -%}
  .coupons-record-more {
    background: linear-gradient(180deg, rgba(250, 250, 250 ,0.6) 0%, #fafafa);
  }
{%- endif -%}
</style>

<script id="coupons-record-template" type="text/x-template">
{% raw %}
<div class="coupons-record-box" style="--coupons-color:{{storeConfig.pay_color}};{% if coupons.size > 6 %}height:220px;{% endif %}">
    <div class="coupons-record-title">{{lang.coupons.available_num | replace: '{number}',coupons.size}}</div>
    <div class="coupons-record-wrap">
      {% for coupon in coupons %}
      <div class="coupons-record-item {% if showCouponCode == coupon.coupon_code %}coupons-record-item-active{% endif %}" data-code="{{coupon.coupon_code}}">
        <div class="coupons-record-item-body">
          <div class="coupons-record-item-header">
            <div class="coupons-record-item-riado"></div>
            <div class="coupons-record-item-code">
              {{coupon.coupon_code}}
              {%- if coupon.customer_range != 0 -%}
              <div class="coupons-exclusive-label">
                🎁 {{ lang.coupon.exclusive }}
              </div>
              {%- endif -%}
            </div>
          </div>
          <div class="coupons-record-item-label">
            {%- if coupon.rule.discount.type == 1 -%}
            <span>{{ coupon.rule.discount.value }}%</span> OFF
            {%- else -%}
            <span>-{{ coupon.rule.discount.value | money }}</span> 
            {%- endif -%}
            {% if coupon.rule.condition.type == 0 %}
						,&nbsp;{{lang.coupons.discount_rule_extra}}
						{% elsif coupon.rule.condition.type == 1  %}
            {% assign coupon_value = coupon.rule.condition.value %}
						,&nbsp;{{lang.coupons.discount_rule_count | replace: '{condition}',coupon_value }}
						{% else %}
						{% assign coupon_value = coupon.rule.condition.value | money %}
						,&nbsp;{{lang.coupons.discount_rule_amount | replace: '{condition}',coupon_value }}
						{% endif %}
          </div>
        </div>
      </div>
      {% endfor %}

    </div>
    {% if coupons.size > 6 %}
      <div class="coupons-record-more">
        <div class="coupons-record-more-btn">{{lang.base.show_more}}</div>
      </div>
    {% endif %}
   
</div>
{% endraw %}

</script>

<script>
    window["shopCouponRecord"] = function(couponCode,showCouponCode){
      
      function addCoupons(code){
        moi.ajax({
          url: "/coupons",
          type: "post",
          data: JSON.stringify({code:code}),
          success: function (res) {
            if (res.code == 0) {
              getCoupons(showCouponCode)
            }
          }
        })
      }

      function getCoupons(showCouponCode){
        var couponBox = $('.order_discount');

        var couponType = couponBox.data("type");

        if (typeof(storeConfig.coupon_position) == "undefined"){
          storeConfig.coupon_position = "cart,minicart,checkout"
        }
        var coupon_rule = storeConfig.coupon_position ? storeConfig.coupon_position.split(","):[]
        if(!coupon_rule.includes(couponType)){
          return false
        }

        if (couponBox.length) {
          moi.ajax({
            url: "/coupons",
            data: {email: '{{ customerEmail }}' || $('input[name="email"]').val(),checkout_token: '{{ checkout_token }}'},
            type: "get",
            success: function (res) {
              if (res.code == 0 && res.data.length) {
                if(couponBox.find("#coupons-record-template").length){
                  couponBox.find("#coupons-record-template").html("")
                }else{
                  couponBox.append("<div id='coupons-record-template'></div>")
                }

                engine
                  .parseAndRender($("#coupons-record-template").html(), {
                    coupons: res.data,
                    storeConfig: storeConfig,
                    showCouponCode: showCouponCode,
                    lang: window.lang
                  }).then(function (html) {
                    couponBox.find("#coupons-record-template").append(html)
                    couponBox.find(".coupons-record-item").click(function(){
                      var selfNode = $(this);
                      $(this).addClass("coupons-record-item-active").siblings().removeClass("coupons-record-item-active");
                      const couponInput =$(this).parents(".order_discount").find(".coupon_code_input")
                      couponInput.val($(this).data("code"))
                      couponInput.keyup(function(){
                        if($(this).val() == ""){
                          selfNode.siblings().removeClass("coupons-record-item-active");
                        }
                      })
                      couponInput.parents('.order_text_box').addClass('order_text_on');
                      couponInput.parents('.order_text_box').siblings(".order_discount_code_btn").addClass('order_discount_code_btn_on');
                      couponInput.parents('.order_text_box').siblings(".order_discount_code_btn").click()
                    })
                    couponBox.find(".coupons-record-more-btn").click(function(){
                      couponBox.find(".coupons-record-box").css('height','auto')
                      $(this).parent().remove()
                    })
                    
                  })
              }else {
                couponBox.find("#coupons-record-template").html("");
              }
            }
          });
        }
      }
      if(couponCode){
        addCoupons(couponCode);
      }else{
        getCoupons(showCouponCode);
      }
    }
</script>
